<template>
  <div class="max-s">
    <div class="text-1" v-for="(item, index) in list?.records" :key="index">
      <div class="texty-1">{{ item.releaseDate }}</div>
      <div>{{ item.title }}</div>
    </div>
    <el-pagination
      v-if="list?.total > 0"
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total,slot, totalPage, sizes, prev, pager, next, jumper"
      :total="list?.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #default>
        <span>,共{{ totalPage }}页</span>
      </template>
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import type { arrs1 } from '@/services/types/Applic'
const props = defineProps<{
  list: arrs1 | any
}>()
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 计算总页数
const totalPage = computed(() => {
  return Math.ceil(props.list.total / pageSize4.value)
})
const emit = defineEmits<{
  (e: 'handleSizeChange', val: number): void
  (e: 'handleCurrentChange', val: number): void
}>()
const handleSizeChange = (val: number) => {
  emit('handleSizeChange', val)
  console.log(val)
}
const handleCurrentChange = (val: number) => {
  emit('handleCurrentChange', val)
}
</script>

<style lang="scss" scoped>
.max-s {
  min-height: 600px;
}
.text-1 {
  width: 100%;
  height: 52px;
  border-bottom: 1px solid #858383;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.texty-1 {
  margin-right: 60px;
}
</style>
